<template>
  <div class="welcome">
    <div class="welcome-header">
      <h1>欢迎使用智护银龄后台管理系统</h1>
      <p class="welcome-subtitle">一站式社区智慧养老健康监护平台</p>
    </div>
    
    <div class="stats">
      <div class="stat-card">
        <div class="stat-icon community-icon">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
            <path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3>社区总数</h3>
          <p class="stat-number">{{ stats.communityCount }}</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon member-icon">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
            <path d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A1.5 1.5 0 0 0 18.54 8H16c-.8 0-1.54.37-2 1l-3.72 5.5L8.5 12.5 6.28 15.5 3.5 12.5 2 15l5 5h13c.8 0 1.54-.37 2-1l.5-.5h-2.5z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3>社区成员总数</h3>
          <p class="stat-number">{{ stats.memberCount }}</p>
        </div>
      </div>
    </div>
    
    <div class="welcome-content">
      <div class="info-section">
        <h2>系统功能</h2>
        <ul class="feature-list">
          <li>实时健康数据监控</li>
          <li>智能预警系统</li>
          <li>社区成员管理</li>
          <li>数据分析与报告</li>
        </ul>
      </div>
      
      <div class="info-section">
        <h2>使用提示</h2>
        <ul class="tip-list">
          <li>定期查看预警信息，及时处理异常情况</li>
          <li>关注老人健康数据变化趋势</li>
          <li>维护社区成员信息的准确性</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '../../utils/request'

const stats = ref({
  communityCount: 0,
  memberCount: 0
})

// 获取统计数据的方法
const getStats = async () => {
  try {
    // 获取社区列表
    const communityRes = await request.get('/admin/getCommunityList')
    if (communityRes.code === 1) {
      // 社区数量等于社区列表的长度
      stats.value.communityCount = communityRes.data.length
    }
    
    // 获取社区成员总数
    const memberRes = await request.get('/admin/getCommunityPeople')
    if (memberRes.code === 1) {
      stats.value.memberCount = memberRes.data
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

onMounted(() => {
  getStats()
})
</script>

<style scoped>
.welcome {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  min-height: 100%;
}

.welcome-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
}

.welcome-header h1 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 12px;
  font-weight: 600;
}

.welcome-subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.stat-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.community-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.member-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-content h3 {
  margin: 0 0 8px;
  color: #7f8c8d;
  font-size: 16px;
  font-weight: 500;
}

.stat-number {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
}

.welcome-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-section h2 {
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f2f5;
  font-size: 20px;
}

.feature-list,
.tip-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li,
.tip-list li {
  padding: 10px 0 10px 25px;
  position: relative;
  color: #34495e;
}

.feature-list li:before,
.tip-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.feature-list li:before {
  background: #4facfe;
}

.tip-list li:before {
  background: #fa709a;
}

@media (max-width: 768px) {
  .welcome {
    padding: 16px;
  }
  
  .stats {
    grid-template-columns: 1fr;
  }
  
  .welcome-content {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  
  .stat-number {
    font-size: 28px;
  }
}
</style>